<template>
  <div class="home">
    <el-form ref="form" :model="params" label-width="80px">
      <el-form-item label="状态">
        <el-select v-model="params.freezeStatus" placeholder="请选择状态" clearable>
          <el-option label="正常" :value="0"></el-option>
          <el-option label="冻结" :value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="企业">
        <company-select clearable v-model="params.companyId" />
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="params.userType" placeholder="请选择类型" clearable>
          <el-option label="超管" value="admin"></el-option>
          <el-option label="普通" value="user"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="_getOrderList">查询</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="tableLoading"
      :data="orderList"
      style="width: 100%"
    >
      <el-table-column
        prop="userName"
        label="用户名"
      >
      </el-table-column>

      <el-table-column
        prop="realName"
        label="姓名"
      >
      </el-table-column>

      <el-table-column
        prop="phone"
        label="联系方式"
      >
      </el-table-column>

      <el-table-column
        prop="companyName"
        label="所属企业"
      >
      </el-table-column>

      <el-table-column
        prop="userType"
        label="类型"
        :formatter="formatterUserType"
      >
      </el-table-column>

      <el-table-column
        prop="reportNum"
        label="报告数量"
      >
      </el-table-column>

      <el-table-column
        prop="deviceNum"
        label="支持设备数量"
      >
      </el-table-column>

      <el-table-column
        prop="freezeStatus"
        label="状态"
        :formatter="formatterStatus"
      >
      </el-table-column>

      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">冻结</el-button>
          <el-button v-loading="loading" type="text" size="small" @click="resetUserPassword(scope.row.id)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button v-loding="resetPdBtnLoadng">重置密码</el-button>

    <Pagination
      :pageSize.sync="params.pageSize"
      :currentPage.sync="params.pageNum"
      :total="total"
      @size-change="_getOrderList"
      @current-change="_getOrderList"
    />
  </div>
</template>

<script>
import CompanySelect from 'components/CompanySelect'
import { getUserList, resetPassword } from 'api/user'

export default {
  name: 'Home',

  components: {
    CompanySelect
  },

  data() {
    return {
      params: {
        companyId: '',
        freezeStatus: '',
        userType: '',
        pageSize: 10,
        pageNum: 1,
      },
      tableLoading: false,
      resetPdBtnLoadng: false,
      orderList: [],
      total: 0,
    }
  },

  mounted() {
    this._getOrderList()
  },

  methods: {
    _getOrderList() {
      this.loading = true
      getUserList(this.params).then(res => {
        this.loading = false
        this.orderList = res.content
        this.total = res.totalElements
      })
    },

    formatterUserType({ userType }) {
      if (userType === 'user') {
        return '普通员工'
      }
      return '超级管理'
    },

    formatterStatus({ freezeStatus }) {
      return freezeStatus ? '不正常' : '正常'
    },

    cancel() {
      this.params = {
        companyId: '',
        freezeStatus: '',
        userType: '',
      }
      this._getOrderList()
    },

    resetTable() {
      this.params = {
        companyId: '',
        freezeStatus: '',
        userType: '',
        pageSize: 10,
        pageNum: 1,
      }
      this._getOrderList()
    },

    resetUserPassword(id) {
      this.$confirm('你是否重置密码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        resetPassword(id).then(_ => {
          this.$message.success('重置成功')
          this.loading = false
          this.resetTable()
        }).catch(_ => {
          this.loading = false
        })
      })
    },
  },
}
</script>
